<script setup lang="ts">
import { ref, reactive } from 'vue';

defineProps({
    title: String,
    onLogin: {
        type: Function,
        required: true,
    }
})

let blok = ref<string>('user') //区分登录类别
let info = reactive({
    account: "",
    password: "",
    code: "",
    blok: blok.value
});


//类别
const tapBlok = () => {
    blok.value == 'user' ? blok.value = 'phone' : blok.value = 'user'
}
//删除
const tapDele = (res: string) => {
    if (res == "account") {
        info.account = "";
    } else if (res == "password") {
        info.password = "";
    }
}

/* 验证码倒计时 */
let time = ref<number>(60); //倒计时
let times: number = 60; //固定 用于判断依据
const tapTime = () => {
    if (time.value != times) return;
    const setTime = () => {
        let timer = setTimeout(() => {
            time.value--;
            if (time.value == 0) {
                clearInterval(timer)
                time.value = times;
                return;
            }
            setTime()
        }, 1000);
    }
    setTime();
}

</script>

<template>
    <div class="_body">
        <div class="_body_f flex">
            <span @click="tapBlok()">{{ blok == 'phone' ? '账号登录' : '手机号登录' }}</span>
        </div>
        <div class="_body_title">{{ title }}</div>
        <div class="info_box align">
            <img class="img" src="../../../assets/account.png" />
            <span class="title">{{ blok != 'phone' ? '账号' : '手机号' }}</span>
            <div class="info_input align">
                <input class="input" placeholder="请输入" maxlength="22" v-model="info.account" />
                <img class="wrong_img" src="../../../assets/wrong.png" @click="tapDele('account')" />
            </div>
        </div>

        <div class="info_box align" v-if="blok != 'phone'">
            <img class="img" src="../../../assets/password.png" />
            <span class="title">密码</span>
            <div class="info_input align">
                <input class="input" placeholder="请输入" maxlength="22" v-model="info.password" />
                <img class="wrong_img" src="../../../assets/wrong.png" @click="tapDele('password')" />
            </div>
        </div>

        <div class="info_box align" v-if="blok == 'phone'">
            <img class="img" src="../../../assets/code.png" />
            <span class="title">验证码</span>
            <div class="info_input align">
                <input class="input" placeholder="请输入" maxlength="7" v-model="info.code" />
                <span class="input_code" @click="tapTime(); onLogin('time', info)">
                    {{ time == times ? '获取验证码' : time + ' s' }}
                </span>
            </div>
        </div>

        <div class="info_box flex">
            <span class="box_ok" @click="onLogin('login', info)">确 认</span>
        </div>

        <div class="box_text ">
            <span style="float: left;" @click="onLogin('noPassword', info)">忘记账号密码了？</span>
            <span style="float: right;" @click="onLogin('noAccount', info)">还没有账号？</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
._body {
    max-width: 400px;
    width: calc(100% - 20px);
    float: left;
    padding: 15px;
    margin: 10px;
    overflow: hidden;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #f1f1f199;
    background-image: linear-gradient(100deg, #ffffff33, #cccccc99, #99999999, #77777799);
    position: relative;

    ._body_f {
        position: absolute;
        top: 0px;
        right: 0px;
        box-sizing: border-box;
        font-size: 13px;
        color: #fff;
        user-select: none;

        span {
            padding: 10px 10px;
            box-sizing: border-box;
            border-radius: 0px 0px 0px 20px;
            background-color: #444;
            box-shadow: -1px 2px 3px #eee;
        }

        span:active {
            opacity: 0.7;
        }
    }

    ._body_title {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        margin: 10px 0px;
        text-shadow: 1px 2px 3px #000;
    }

    .info_box {
        width: calc(100% - 20px);
        float: left;
        margin: 10px;
        padding: 10px 15px;
        border-radius: 40px;
        box-sizing: border-box;
        background-color: #f1f1f199;

        .img {
            max-width: 20px;
            min-width: 20px;
            max-height: 20px;
            min-height: 20px;
            padding: 5px;
            border-radius: 10px;
            user-select: none;
        }

        .title {
            min-width: auto;
            padding: 5px;
            white-space: nowrap;
            user-select: none;
        }

        .info_input {
            width: 100%;
            height: 40px;
            float: left;
            padding: 5px 15px;
            border-radius: 40px;
            box-sizing: border-box;
            background-color: #ffffff99;

            .input {
                width: 100%;
                font-size: 17px;
            }

            .wrong_img {
                max-width: 20px;
                min-width: 20px;
                max-height: 20px;
                min-height: 20px;
                border-radius: 10px;
                box-sizing: border-box;
                user-select: none;
            }

            .wrong_img:active {
                opacity: 0.7;
                background-color: #900;
            }

            .input_code {
                font-size: 12px;
                text-align: center;
                padding: 3px 10px;
                color: #fff;
                white-space: nowrap;
                user-select: none;
                border-radius: 20px;
                background-color: #0f72d5;
            }

            .input_code:active {
                opacity: 0.7;
                background-color: #900;
            }
        }

        .box_ok {
            width: 100%;
            text-align: center;
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 30px;
            color: #fff;
            background-color: #0f72d5;
            background-image: linear-gradient(180deg, #3d80c4, #0f72d5, #75b2ef);
            user-select: none;
        }

        .box_ok:active {
            opacity: 0.7;
            color: #fff;
            background-color: #0f72d5;
            user-select: none;
        }
    }

    .box_text {
        width: 100%;
        float: left;
        margin-top: 20px;
        box-sizing: border-box;
        font-size: 14px;
        user-select: none;
    }

    .box_text span:active {
        opacity: 0.7;
    }
}
</style>

<!-- 
    The code was developed and designed by Linwute in 2023.11.26
 -->
